<script lang="ts" setup>
import { CountDown } from '@/utils/utils'
import { computed, reactive, ref } from 'vue'

// 引用说明
const props = defineProps({
  item: {
    type: Object,
    default: () => {
    }
  }
})

const ellipsis = ref(true)


const auditData = reactive({
  open: false,
  title: ''
})


// 查看审核失败原因
const handleReasonsAuditFailure = (item) => {
  auditData.open = true
  auditData.title = item.reviewRemark
}


/** 下载状态 */
const DownloadStatusDict = [
  {
    label: '视频未下载',
    value: '3002',
    color: '#999999'
  },
  {
    label: '视频已下载',
    value: '3001',
    color: '#87d068'
  }
]

/** 数智人分类 */
const AffiliatedPlatformDict = [
  {
    label: '火山',
    value: '2001',
    color: 'cyan'
  },
  {
    label: '腾讯',
    value: '2002',
    color: 'blue'
  }
]

/** 发布状态 */
const PublishStatusDict = [
  {
    label: '待发布',
    value: '7002',
    color: '#f50'
  },
  {
    label: '已发布',
    value: '7001',
    color: '#2db7f5'
  },
  {
    label: '发布失败',
    value: '7004',
    color: 'red'
  },
  {
    label: '发布成功',
    value: '7003',
    color: '#108ee9'
  }
]

/** 文案状态 */
const CopywritingStatusDict = [
  {
    label: '文案待添加',
    value: '6001',
    color: '#808080'
  },
  {
    label: '文案已添加',
    value: '6002',
    color: '#2db7f5'
  }
]

/** 操作状态 */
const OperateTypeDict = [
  {
    value: '5000',
    label: 'app申请帮我剪辑',
    color: '#f933f6'
  },
  {
    value: '5001',
    label: '音频待录制',
    color: '#808080'
  },
  {
    value: '5002',
    label: '音频待审核',
    color: '#808080'
  },
  {
    value: '5003',
    label: '音频审核失败',
    color: '#fa1515'
  },
  {
    value: '5004',
    label: '待制作',
    color: '#808080'
  },
  {
    value: '5005',
    label: '制作中',
    color: '#f433f6'
  },
  {
    value: '5006',
    label: '视频待初审',
    color: '#808080'
  },
  {
    value: '5007',
    label: '视频待终审',
    color: '#808080'
  },
  {
    value: '5008',
    label: '视频待终审',
    color: '#808080'
  },
  {
    value: '5009',
    label: '视频终审成功',
    color: '#2db7f5'
  },
  {
    value: '5010',
    label: '视频终审失败',
    color: '#fa1515'
  },
  {
    value: '5011',
    label: '视频发布失败',
    color: '#fa1515'
  }
]

// 失败的提示样式
const errorTip = computed(() => {
  return (Number(props.item.operateStatus) === 5010 || Number(props.item.operateStatus) === 5003)
})
</script>

<template>
  <div class="list-items">
    <!-- 第零行   -->
    <div class="ml-auto flex items-center mb-3">
      <!-- id -->
      <div class="flex items-center mr-10">
        <span class="text-gray mr-1">话题ID:</span>
        <span class="text-lightgray">{{ item.videoId }}</span>
      </div>

      <!-- 医生 -->
      <div class="flex items-center mr-10">
        <span class="text-gray mr-1">医生:</span>
        <span class="text-lightgray">{{ item.nickName }}</span>
      </div>

      <!-- 数智人类型 -->
      <div class="flex items-center mr-10">
        <span class="text-gray">数智人:</span>
        <div v-for="items in AffiliatedPlatformDict" :key="items.value" class="ml-1 text-lightgray">
          <div v-if="items.value === item.affiliatedPlatform">{{ items.label }}</div>
          <!--<a-tag v-if="items.value === item.affiliatedPlatform" :color="items.color"></a-tag>-->
        </div>
      </div>

      <!-- 录制时间 -->
      <div class="mr-7 flex items-center">
        <div class="text-gray"> 录制时间:</div>
        <div class="ml-1 text-lightgray"> {{ item.createTime }}</div>
      </div>

      <!-- 剩余时间 -->
      <div :class="[CountDown(item.makingACountdown).status === 'ing' ? 'text-main' :'text-red']" class="time">
        {{ CountDown(item.makingACountdown).text }}
      </div>
    </div>

    <!-- 第一行 -->
    <div class="flex items-center">
      <!-- 标题 -->
      <div :class="[errorTip ? 'text-red' : 'text-black']" class="text-lg font-bold">
        {{ item.topicTitle }}
      </div>
    </div>

    <!--  第二行  -->
    <div class="mt-3">
      <a-typography-paragraph
        :content="item.topicContent"
        :ellipsis="ellipsis ? { rows: 3, expandable: true, symbol: 'more' } : false"
      />
    </div>

    <!--  第三行  -->
    <div class="mt-3 flex ml-auto">
      <!-- 下载状态 -->
      <div v-for="items in DownloadStatusDict" :key="items.value">
        <a-tag v-if="items.value === item.downloadStatus" :color="items.color">
          {{ items.label }}
        </a-tag>
      </div>

      <!--  发布状态  -->
      <!--      <div v-for="items in PublishStatusDict" :key="items.value" >-->
      <!--        <a-tag v-if="items.value === item.publishStatus" :color="items.color">-->
      <!--          {{ items.label }}-->
      <!--        </a-tag>-->
      <!--      </div>-->

      <!-- 发布文案 -->
      <div v-for="items in CopywritingStatusDict" :key="items.value" class="">
        <a-tag v-if="items.value === item.copywritingStatus" :color="items.color">
          {{ items.label }}
        </a-tag>
      </div>


      <!-- 操作状态 -->
      <div v-for="items in OperateTypeDict" :key="items.value" class="">
        <a-tag v-if="items.value === item.operateStatus" :color="items.color">
          {{ items.label }}
        </a-tag>
      </div>

    </div>

    <!-- 第四行 -->
    <a-space class="mt-3 ml-auto">
      <slot :row="item" name="operation" />
      <a-button v-if="Number(item.operateStatus) === 5010" danger size="small"
                type="primary" @click="handleReasonsAuditFailure(item)">审核失败原因
      </a-button>
    </a-space>


    <!-- 查看  -->
    <a-modal v-model:open="auditData.open" title="审核原因">
      <div class="p-10">
        {{ auditData.title }}
      </div>
    </a-modal>

  </div>
</template>

<style lang="less" scoped>
.list-items {
@apply p-3 mb-3;
@apply rounded-lg shadow bg-f1;
@apply cursor-pointer;
  //@apply hover:shadow-lg hover:bg-f9;
@apply flex flex-col;

  .nickName {
    color: rgba(12, 28, 30, .88);
  }
}
</style>
